<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-05-15 11:12:06
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-09-21 15:00:48
 * @Description:
 *
-->

<template>
  <MyContainer class="hybrid-cloud-cluster-container">
    <MyHeader class="header">
      <span class="name">集群服务商</span>
      <el-select
        v-model="cloudProvider"
        placeholder="请选择集群服务商"
        size="medium"
        style="width: 200px; margin-left: 10px; margin-right: 20px"
        @change="cloudVendorChange"
      >
        <el-option
          v-for="item in cloudVendors"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <span class="name">集群名称</span>
      <el-select
        v-model="k8sClusterName"
        placeholder="请选择集群"
        size="medium"
        style="width: 200px; margin-left: 10px; margin-right: 20px"
        :loading="clusterLoading"
        @change="clusterChange"
      >
        <el-option
          v-for="item in clusters"
          :key="item.k8sClusterName"
          :label="item.k8sClusterName"
          :value="item.k8sClusterName"
        />
      </el-select>
      <el-button size="medium" @click="resetClick">重置</el-button>
    </MyHeader>
    <MyMain class="main">
      <!-- tabs -->
      <el-tabs v-model="activeTab" class="tabs">
        <el-tab-pane label="节点管理" name="node">
          <NodeMgmt :common-info="commonInfo" />
        </el-tab-pane>
        <el-tab-pane label="命名空间管理" name="namespace">
          <NamespaceMgmt :common-info="commonInfo" />
        </el-tab-pane>
        <el-tab-pane label="工作负载管理" name="workload">
          <WorkLoadMgmt :common-info="commonInfo" />
        </el-tab-pane>
        <el-tab-pane label="容器组管理" name="pods">
          <PodsMgmt :common-info="commonInfo" />
        </el-tab-pane>
        <el-tab-pane label="服务管理" name="service">
          <ServiceMgmt :common-info="commonInfo" />
        </el-tab-pane>
        <el-tab-pane label="资源弹性伸缩" name="scaling">
          <ScalingMgmt :common-info="commonInfo" />
        </el-tab-pane>
      </el-tabs>
    </MyMain>
  </MyContainer>
</template>

<script>
import MyContainer from '@/components/Layout/MyContainer.vue'
import MyHeader from '@/components/Layout/MyHeader.vue'
import MyMain from '@/components/Layout/MyMain.vue'
import NodeMgmt from './components/NodeMgmt.vue'
import NamespaceMgmt from './components/NamespaceMgmt.vue'
import WorkLoadMgmt from './components/WorkLoadMgmt.vue'
import PodsMgmt from './components/PodsMgmt.vue'
import ServiceMgmt from './components/ServiceMgmt.vue'
import ScalingMgmt from './components/ScalingMgmt.vue'
import { getK8sClusterInfos } from '@/api/cnap/hybrid-cloud'
import cloudVendorHandle from '@/views/mixin/cloudVendorHandle.js'
import { isEmptyString } from '@/utils/index'

export default {
  name: 'HybridCloudCluster',
  components: {
    MyContainer,
    MyHeader,
    MyMain,
    NodeMgmt,
    NamespaceMgmt,
    WorkLoadMgmt,
    PodsMgmt,
    ServiceMgmt,
    ScalingMgmt
  },
  mixins: [cloudVendorHandle],
  data() {
    return {
      cloudProvider: '', // 云商
      clusters: [], // 集群选项
      k8sClusterName: '', // 集群
      clusterLoading: false, // 集群加载中
      activeTab: 'node', // 选中tab
      commonInfo: {} // 通用信息
    }
  },
  computed: {
    /**
     * @description: 云商参数
     * @return {*}
     */
    cloudVendorValue() {
      return this.cloudProvider
    }
  },
  watch: {},
  created() {
    this.initData() // 初始化数据
  },
  methods: {
    /**
     * @description: 初始化-->修改为初始化显示所有集群信息，默认tab为node
     * @return {*}
     */
    initData() {
      if (!isEmptyString(this.$route.query.cloudVendor) && !isEmptyString(this.$route.query.accountName)) {
        // 格式化 云商+账号
        this.cloudProvider = this.formatVendorAccount(
          this.$route.query.cloudVendor,
          this.$route.query.accountName
        ) // 获取云商
      }
      this.k8sClusterName = this.$route.query.k8sClusterName || '' // 获取集群
      this.activeTab = this.$route.query.targetTab || 'node' // 获取跳转tab
      this.getK8sClusterInfos()
    },
    /**
     * @description: 处理集群选中情况
     * @return {*}
     */
    handleClusterSelect() {
      if (this.k8sClusterName) {
        // 获取集群所在位置
        const idx = this.clusters.findIndex((element) => {
          return element.k8sClusterName === this.k8sClusterName
        })
        if (idx < 0) {
          // 当前集群不在集群信息列表中
          // 设置 commonInfo
          this.k8sClusterName = ''
          this.commonInfo = {
            ...this.cloudVendorParams, // 云商账号
            k8sClusterName: this.k8sClusterName, // 集群
            vpcId: this.getClusterVpcId() // vpcId
          }
        } else {
          // 当前集群在集群信息列表中
          // 设置 commonInfo
          this.commonInfo = {
            ...this.cloudVendorParams, // 云商账号
            k8sClusterName: this.k8sClusterName, // 集群
            vpcId: this.getClusterVpcId() // vpcId
          }
        }
      }
    },
    /**
     * @description: 获取当前集群的vpcId
     * @return {*}
     */
    getClusterVpcId() {
      const filters = this.clusters.filter((element) => {
        return element.k8sClusterName === this.k8sClusterName
      }) // 过滤出集群名称一样的集群
      return filters.length > 0 ? filters[0].vpcId : ''
    },
    /**
     * @description: 获取集群信息列表
     * @return {*}
     */
    getK8sClusterInfos() {
      this.clusterLoading = true
      // 请求接口
      getK8sClusterInfos({
        ...this.cloudVendorParams,
        pageNo: 1,
        pageSize: 100
      })
        .then((res) => {
          this.clusterLoading = false
          this.clusters = Array.isArray(res.data.result) ? res.data.result : []
          this.handleClusterSelect()
        })
        .catch((err) => {
          console.log(err)
          // 异常处理
          this.clusterLoading = false
          this.clusters = []
          this.handleClusterSelect()
        })
    },
    /**
     * @description: 集群切换
     * @param {*} val
     * @return {*}
     */
    clusterChange(val) {
      this.commonInfo = {
        ...this.cloudVendorParams, // 云商账号
        k8sClusterName: this.k8sClusterName, // 集群
        vpcId: this.getClusterVpcId() // vpcId
      }
    },
    /**
     * @description: 云服务商切换
     * @param {*} val
     * @return {*}
     */
    cloudVendorChange(val) {
      this.k8sClusterName = '' // 集群置空
      this.getK8sClusterInfos()
      this.clusterChange()
    },
    /**
     * @description: 筛选框重置
     * @return {*}
     */
    resetClick() {
      this.cloudProvider = ''
      this.k8sClusterName = ''
      this.clusterChange()
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.hybrid-cloud-cluster-container {
  .header {
    padding: 0px 25px;

    .name {
      .textStyle(14px , 400, #4a4a4a);
      line-height: 20px;
    }
  }

  .main {
    padding: 10px 25px 20px;
  }
  .tabs {
    /deep/ .el-tabs__header {
      margin-bottom: 20px;
    }
    /deep/ .el-tabs__item {
      height: 44px;
    }
  }
}
</style>
